import React from 'react'
import { Table } from 'antd';
import { findUser } from '@/api/sigin'


const columns = [
    {
        title: '用户id',
        dataIndex: 'id'
    },
    {
      title: 'Name',
      dataIndex: 'username'
    },
    {
      title: '性别',
      dataIndex: 'sex',
      render(col, row){
          if(row.sex === '1'){
              return '男'
          } else {
              return '女'
          }
      }
    },
    {
      title: '生日',
      dataIndex: 'birthday',
    },
  ];

  

  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    // getCheckboxProps: record => ({
    //   disabled: record.name === 'Disabled User', // Column configuration not to be checked
    //   name: record.name,
    // }),
  };

class User extends React.Component{

    state = {
        userList: []
    }

    render(){
        const { userList } = this.state
        return(
            <div>
                <h2 className='userlist-title'>用户列表</h2>
                 <Table 
                 rowSelection={rowSelection} 
                 columns={columns} 
                 dataSource={userList} 
                 rowKey='id' 
                 pagination={{
                     defaultPageSize: 5
                 }}
                 position='top'
                 />
            </div>
        )
    }

    componentDidMount() {
        findUser().then(response=>{
            const { data } = response
            this.setState({
                userList: data
            })
        })
    }
}

export default User